<template>
  <div>
    <el-form
    ref="caluseForm"
    class=" "
    :model="caluseForm"
    >
    
      <el-row >
        <el-col :span="24">
          <el-tabs type="border-card" v-model="currentCalTab">
            <el-tab-pane
            v-for="(item, index) in caluesTab"
            :key="index"
            :name="item.name"
            :label="item.title"
          />
          <div v-if="currentCalTab==1">
              <div v-for="(item, index) in caluseForm.fee_list" :label="index" :key="index">
                <div class="display-flex display-flex-align-center h-80">
                  <i class="el-icon-circle-close text-18 mr-10 mb-20" @click="delCaluseFee(index)"></i>
                  <el-form-item :prop="'fee_list.' + index + '.title'"   :rules="{ required: true, message: '请输入费用包含标题', trigger: 'blur' }">
                    <el-input
                      v-model="item.title"
                      type="text"
                      placeholder="请输入标题"
                      style="width: 100px;margin-right:15px"
                      size="small"
                    />
                  </el-form-item>
                  <el-form-item :prop="'fee_list.' + index + '.value'"   :rules="{ required: true, message: '请输入费用包含内容', trigger: 'blur' }">
                    <el-input
                      v-model="item.value"
                      type="textarea"
                      :rows="3"
                      maxlength="500"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入内容"
                      class="pageWidth"
                      size="small"
                    />
                  </el-form-item>
                </div>
              </div>
              <el-button
                type="primary"
                size="small"
                @click="addCaluseFee"
                class="mt-20"
              >添加费用包含
            </el-button>
          </div>
          <div v-if="currentCalTab==2">
            <div v-for="(item, index) in caluseForm.nofee_list" :label="index" :key="index">
              <div class="display-flex display-flex-align-center h-80">
                <i class="el-icon-circle-close text-18 mr-10 mb-20" @click="delCaluseNoFee(index)"></i>
                <el-form-item :prop="'nofee_list.' + index + '.title'"  :rules="{ required: true, message: '请输入费用不包含标题', trigger: 'blur' }">
                  <el-input
                      v-model="item.title"
                      type="text"
                      placeholder="请输入标题"
                      style="width: 100px;margin-right:15px"
                      size="small"
                    />
                </el-form-item>
                <el-form-item :prop="'nofee_list.' + index + '.value'"  :rules="{ required: true, message: '请输入费用不包含内容', trigger: 'blur' }">
                  <el-input
                    v-model="item.value"
                    type="textarea"
                    :rows="3"
                    maxlength="500"
                    minilength="5"
                    show-word-limit	
                    placeholder="请输入内容"
                    class="pageWidth"
                    size="small"
                  />
                </el-form-item>
              </div>
            </div>
            <el-button
                type="primary"
                size="small"
                @click="addCaluseNoFee"
                class="mt-20"
              >添加费用不包含
            </el-button>
          </div>
          <div v-if="currentCalTab==3">
            <div v-for="(item, index) in caluseForm.child_notice" :label="index" :key="index">
              <div class="display-flex display-flex-align-center h-80">
                <i class="el-icon-circle-close text-18 mr-10 mb-20" @click="delCaluseChildNotice(index)"></i>
                <el-form-item :prop="'child_notice.' + index + '.title'"  :rules="{ required: true, message: '请输入儿童价说明标题', trigger: 'blur' }">
                  <el-input
                      v-model="item.title"
                      type="text"
                      placeholder="请输入标题"
                      style="width: 100px;margin-right:15px"
                      size="small"
                    />
                </el-form-item>
                <el-form-item :prop="'child_notice.' + index + '.value'"  :rules="{ required: true, message: '请输入儿童价说明内容', trigger: 'blur' }">
                  <el-input
                    v-model="item.value"
                    type="textarea"
                    :rows="3"
                    maxlength="500"
                    minilength="5"
                    show-word-limit	
                    placeholder="请输入内容"
                    class="pageWidth"
                    size="small"
                  />
                </el-form-item>
              </div>
            </div>
            <el-button
                type="primary"
                size="small"
                @click="addCaluseChildNotice"
                class="mt-20"
              >添加儿童价说明
            </el-button>
          </div>
          <div v-if="currentCalTab==4">
            <wangeditor
                style="width: 100%"
                :content="caluseForm.book_desc"
                @editorContent="getCaluseBookDescContent"
            ></wangeditor>
          </div>
          <div class="display-flex-column " v-if="currentCalTab==5">
          <div class="display-flex-column mb-20" >
            <div class="ft-w700 text-15 mr-20 w-100 mb-20 text-black" >儿童预定限制</div>
            <el-checkbox  label="1"  v-model="item.check" v-for="(item, index) in caluseForm.child_limit" :label="index" :key="index">
              <div class=" h-50">
                <div class="ft-w700 text-12 mr-20 w-100 mb-20" >{{item.value}}</div>
              </div>
            </el-checkbox>
          </div>
          <div class="display-flex-column mb-20" >
            <div class="ft-w700 text-15 mr-20 w-100 mb-20 text-black" >年龄限制</div>
            <el-checkbox  label="1"  v-model="item.check" v-for="(item, index) in caluseForm.age_limit" :label="index" :key="index">
              <div class=" h-50">
                <div class="ft-w700 text-12 mr-20 w-100 mb-20" >{{item.value}}</div>
              </div>
            </el-checkbox>
          </div>
          <div class="display-flex-column mb-20" >
            <div class="ft-w700 text-15 mr-20 w-100 mb-20 text-black" >人群限制</div>
            <el-checkbox  label="1"  v-model="item.check" v-for="(item, index) in caluseForm.people_limit" :label="index" :key="index">
              <div class=" h-50">
                <div class="ft-w700 text-12 mr-20 w-100 mb-20" >{{item.value}}</div>
              </div>
            </el-checkbox>
          </div>
          </div>
          <div class="display-flex-column " v-if="currentCalTab==6">
            <el-col :span="24">    
              <el-table
                border
                size="small"
                class="specsList"
                ref="tableParameter"
                :data="caluseForm.refund_rate"
                row-key="parameter_value_id"
              >
                <el-table-column
                  align="center"
                  label="取消时间"
                  min-width="120"
                >
                
                  <template slot-scope="scope">
                    <div v-if="scope.row.type == 1" class="ml-10 display-flex display-flex-align-center h-80">
                      <span class="mr-10">使用日期前</span>
                      <el-form-item style="margin-bottom:0px" :prop="'refund_rate.' + scope.$index + '.refund_time'"   :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                        <el-input class="mr-10" type="number" v-model="scope.row.refund_time"  placeholder="请输入" style="width: 200px;"></el-input>
                      </el-form-item>
                      <span class="mr-10">分钟</span>
                    </div> 
                    <div  v-if="scope.row.type == 2" class="ml-10 display-flex display-flex-align-center h-80">
                      <span class="mr-10">使用日期前</span>
                      <el-form-item style="margin-bottom:0px" :prop="'refund_rate.' + scope.$index + '.refund_time'"   :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                        <el-input class="mr-10" type="number" v-model="scope.row.refund_time"  placeholder="请输入" style="width: 200px;"></el-input>
                      </el-form-item>
                      <span class="mr-10">分钟之后</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="损失费用（%）" mini-width="100">
                  <template slot-scope="scope">
                    <el-form-item   :prop="'refund_rate.' + scope.$index + '.value'"   :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                      <el-input
                        v-model="scope.row.value"
                        :min="0"
                        size="small"
                        placeholder="请输入参数值"
                        class="priceBox"
                      />
                    </el-form-item>                    
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="60">
                  <template slot-scope="scope" >
                    <el-button
                    v-if="scope.$index  != 0"
                      type="text"
                      class="submission"
                      size="small"
                      @click.native.prevent="delRufundRate(scope.$index)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                  type="primary"
                  size="small"
                  @click="addRefundRate"
                  class="mt-20"
                >添加取消时间
              </el-button>

              <el-form-item   class="mt-30" >
                <div>退改特别说明：</div>
                <wangeditor
                  style="width: 80%"
                  :content="caluseForm.refund_rule"
                  @editorContent="getRefundRule"
              ></wangeditor>
              </el-form-item>
            </el-col>


          </div>
        
        
        </el-tabs>
        
        
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import wangeditor from "@/components/wangEditor/index.vue";
export default {
  name: 'caluseSet',
  components: {
    wangeditor,
  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({}),
    },
    successData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentCalTab: "1",
      caluesTab: [
        { title: '费用包含', name: '1' },
        { title: '费用不包含', name: '2' },
        { title: '儿童价说明', name: '3' },
        { title: '预定须知', name: '4' },
        { title: '预定限制', name: '5' },
        { title: '退改规则', name: '6' },
      ],
      caluseForm: {
        book_desc: '',
        fee_list: [
          
        ],
        nofee_list: [
          
        ],
        child_notice: [],
        child_limit: [
          {
            limit_type: 1,
            type: 1,
            check: false,
            value: '该产品支持儿童预定'
          },
          {
            limit_type: 2,
            type: 1,
            check: false,
            value: '本产品因服务能力有限，无法接受14天-2周岁（不含）的婴儿出行'
          },
          {
            limit_type: 3,
            type: 1,
            check: false,
            value: '出于安全考虑，18岁以下的未成年人需至少一名成年旅客陪同'
          },
        ],
        age_limit: [
          {
            limit_type: 1,
            type: 2,
            check: false,
            value: '本产品因服务能力有限，仅接受2周岁（含）-79周岁（含）旅客预定'
          },
          {
            limit_type: 2,
            type: 2,
            check: false,
            value: '此产品行程强度较大，请您确保身体健康适宜旅游，如出行人中有75（含）以上的老人，需至少有一位18周岁至70周岁的亲友陪同出行，敬请谅解！'
          },
          {
            limit_type: 3,
            type: 2,
            check: false,
            value: '本产品因服务能力有限，不接受80周岁（含）以上旅客预定，敬请谅解！'
          },
        ],
        people_limit: [
          {
            limit_type: 1,
            type: 3,
            check: false,
            value: '出于安全考虑，本产品不接受孕妇预订，敬请谅解'
          },
          {
            limit_type: 2,
            type: 3,
            check: false,
            value: '此线路因服务能力有限，仅接受持有中国有效身份证件的客人预订(不含中国香港、中国澳门和中国台湾),敬请谅解！'
          },
       
        ],
        refund_rule: '',
        refund_rate: [
          {
            type: 1,
            refund_time: '',
            value: 0,

          },
          {
            type: 2,
            refund_time: '',
            value: 0,

          }
        ]
      },
    };
  },
  watch: {
    successData: {
      handler(val) {
        if (val) {
          let keys = Object.keys(this.caluseForm);
          keys.map((i) => {
            // console.log(i, this.baseInfo[i])
            this.caluseForm[i] = this.baseInfo[i];
            
          });
        }
      },
      immediate: true,
      deep: true,
    },
    
  },
  created() {
   
  },
  methods: {
    getEditorContent(data) {
     this.content = data;
    },
    getCaluseBookDescContent(data){
      this.caluseForm.book_desc = data;
    },
    getRefundRule(data) {
      this.caluseForm.refund_rule = data;
    },
    checkCaluseForm(){
      var fee_list = [];
      for(var i = 0; i < this.caluseForm.fee_list.length; i++){
        if(this.caluseForm.fee_list[i].check == true){
          this.caluseForm.fee_list[i].product_id = this.product_id;
          fee_list.push(this.caluseForm.fee_list[i]);
        }
      }
      // if(fee_list.length<=0){
      //   return this.$message.error("条款维护-请至少添加一条费用包含条目");
      // }

      var nofee_list = [];
      for(var i = 0; i < this.caluseForm.nofee_list.length; i++){
        if(this.caluseForm.nofee_list[i].check == true){
          this.caluseForm.nofee_list[i].product_id = this.product_id;
          nofee_list.push(this.caluseForm.nofee_list[i]);
        }
      }
      // if(nofee_list.length<=0){
      //   return this.$message.error("条款维护-请至少添加一条费用不包含条目");
      // }
      // if(!this.caluseForm.refund_rule){
      //   return this.$message.error("条款维护-请填写退改规则");
      // }

      return false;
    },
  
    addRefundRate(){
      this.caluseForm.refund_rate.splice(- 1, 0, {
        type: 1,
        refund_time: '',
        value: 0,
      });
    },
    addCaluseFee(){
      this.caluseForm.fee_list.push(
        {
          type: 1,
          title: '' ,
          value: ''
        }
      );
    },
    addCaluseNoFee(){
      this.caluseForm.nofee_list.push(
        {
          type: 2,
          title: '' ,
          value: ''
        }
      );
    },
    addCaluseChildNotice(){
      this.caluseForm.child_notice.push(
        {
          type: 3,
          title: '' ,
          value: ''
        }
      );
    },
    delCaluseChildNotice(index){
      this.caluseForm.child_notice.splice(index, 1)
    },
    delCaluseFee(index){
      this.caluseForm.fee_list.splice(index, 1)
    },
    delCaluseNoFee(index){
      this.caluseForm.nofee_list.splice(index, 1)
    },
    delRufundRate(index){
      this.caluseForm.refund_rate.splice(index, 1)
    },
  },
};
</script>
<style lang="scss" scoped>
.tips {
  display: inline-bolck;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-top: 6px;
}
.checkAlls ::v-deep .ivu-checkbox-inner {
  width: 14px;
  height: 14px;
}
.checkAlls ::v-deep .ivu-checkbox-wrapper {
  font-size: 12px;
}
.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}
::v-deep  .ivu-form-item{
     margin-bottom: 0px  !important; 
}
</style>
